<template>
	<view class="mainbgc" @click="hidefalse" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'库存查询',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft">
					<view class="dayinji margin_right" @click.stop="startPrint(99)"></view>
					<view class="diandiandian" @click.stop="selectshow=true">
						<view class="selectcontent" v-show="selectshow">
							<view class="topbox"@click="scanbarCode()">
								<view class="flexleft itemselect">
									<view class="scan margin_right">
									</view>
									<view>扫一扫</view>
								</view>
							</view>
							<view class="sanjiao"></view>
						</view>
					</view>
				</view>
			</view>
		</header-top>
		<!-- 头部搜索 -->
		<view class="mainpadding">
			<view class="flexleft">
				<view class="flexleft">
					<view class="titletext">搜索:</view>
					<view class="flexbetween searchbox margin_right">
						<input type="text" placeholder="输入商品信息" v-model="keyword" confirm-type="search"
							@confirm="init()">
						<view class="searchimg"></view>
					</view>
				</view>
				<view class="flexleft">
					<view class="titletext">仓库:</view>
					<view class="flexbetween searchbox margin_right"
						@click="selectRole('/pages/workbench/jiben/cangkuda?type=1')">
						<input type="text" placeholder="点击选择仓库" disabled="true" v-model="warehouse_name">
						<view class="righticon2"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品 -->
		<view class="mainpadding shangpin">
			<view class=" ffffff radius">
				<view class="flexbetween mainpadding">
					<view class="strongtext flex2">名称</view>
					<view class="strongtext flex1">实际</view>
					<view class="titletext flex1 redcolor">占用</view>
					<view class="strongtext flex1 greentext">可用</view>
				</view>
				<view class="flexcenter" v-if="!list.total">
					<view class="placeholderimage"></view>
				</view>
				<view v-for="item in list.data" :key="item.id">
					<view class="lansrbgc mainpadding">
						<view class="flexbetween">
							<view class="flex2 lansetext">{{item.name}}</view>
							<!-- <view class="lansetext flex1">{{item.sj_stock}}</view>
							<view class="lansetext flex1 redcolor">{{item.zy_stock}}</view>
							<view class="lansetext flex1 greentext">{{item.use_stock}}</view> -->
						</view>
						<view class="lansetext">成本金额：{{item.cost_price}}</view>
					</view>

					<view class="mainpadding xiabankuang">
						<!-- 大单位 -->
						<view class="flexbetween" v-show="item.biggoodsunit.id">
							<view class="nostrongtext flex2">{{item.biggoodsunit.name}}</view>
							<view class="nostrongtext flex1 lantext"
								:style="{color:Number(item.biggoodsunit.sj_stock)<0?'#ff0000':''}">
								{{item.biggoodsunit.sj_stock}}</view>
							<view class="flexcenter flex1 jiantou">
								<view class="nostrongtext redcolor">{{item.biggoodsunit.zy_stock}}</view>
							</view>
							<view class="nostrongtext flex1 greentext" :style="{color:Number(item.biggoodsunit.use_stock)<0?'#ff0000':''}">{{item.biggoodsunit.use_stock}}</view>
						</view>
						<!-- 中单位 -->
						<view class="flexbetween" v-show="item.middlegoodsunit.id">
							<view class="nostrongtext flex2">{{item.middlegoodsunit.name}}</view>
							<view class="nostrongtext flex1 lantext"
								:style="{color:Number(item.middlegoodsunit.sj_stock)<0?'#ff0000':''}">
								{{item.middlegoodsunit.sj_stock}}</view>
							<view class="flexcenter flex1 jiantou">
								<view class="nostrongtext redcolor">{{item.middlegoodsunit.zy_stock}}</view>
							</view>
							<view class="nostrongtext flex1 greentext" :style="{color:Number(item.middlegoodsunit.use_stock)<0?'#ff0000':''}">{{item.middlegoodsunit.use_stock}}</view>
						</view>
						<!-- 小单位 -->
						<view class="flexbetween" v-show="item.smallgoodsunit.id">
							<view class="nostrongtext flex2">{{item.smallgoodsunit.name}}</view>
							<view class="nostrongtext flex1 lantext"
								:style="{color:Number(item.smallgoodsunit.sj_stock)<0?'#ff0000':''}">
								{{item.smallgoodsunit.sj_stock}}</view>
							<view class="flexcenter flex1 jiantou">
								<view class="nostrongtext redcolor">{{item.smallgoodsunit.zy_stock}}</view>
							</view>
							<view class="nostrongtext flex1 greentext" :style="{color:Number(item.smallgoodsunit.use_stock)<0?'#ff0000':''}">{{item.smallgoodsunit.use_stock}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="dibubox  ffffff">
			<view class="flexleft">
				<view class="huisetext flex2">成本金额:￥{{dataAll.cost_price}}</view>
				<view class="lansewenben flex1">实际：
					<text
						:style="{color:Number(dataAll.sjdata.sj_stock_1)<0?'#ff0000':''}">大{{dataAll.sjdata.sj_stock_1}}</text>,
					<text
						:style="{color:Number(dataAll.sjdata.sj_stock_2)<0?'#ff0000':''}">中{{dataAll.sjdata.sj_stock_2}}</text>,
					<text
						:style="{color:Number(dataAll.sjdata.sj_stock_3)<0?'#ff0000':''}">小{{dataAll.sjdata.sj_stock_3}}</text>
				</view>
				<view class="flex1 redcolor2">
					占用：大{{dataAll.zydata.zy_stock_1}},中{{dataAll.zydata.zy_stock_2}},小{{dataAll.zydata.zy_stock_3}}
				</view>
				<view class="flex1 greentext2">可用：
					<text
						:style="{color:Number(dataAll.usedata.use_stock_1)<0?'#ff0000':''}">大{{dataAll.usedata.use_stock_1}}</text>,
					<text
						:style="{color:Number(dataAll.usedata.use_stock_2)<0?'#ff0000':''}">中{{dataAll.usedata.use_stock_2}}</text>,
					<text
						:style="{color:Number(dataAll.usedata.use_stock_3)<0?'#ff0000':''}">小{{dataAll.usedata.use_stock_3}}</text>
				</view>
			</view>
		</view>
		<moDal :message="{modalShow:modal.modalShow,title:modal.title}" @modalSure="modalSure"></moDal><!-- 模态框 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	const tsc = require("@/util/ble/tsc.js");
	const esc = require("@/util/ble/esc.js");
	const encode = require("@/util/ble/encoding.js");
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				selectshow: false,
				keyword: "",
				warehouse_id: "",
				warehouse_name: "",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				dataAll: {},
				// 模态框
				modal: {
					modalShow: false,
					title: "",
				},
				pageShow: false,
				// 打印机技术参数
				sendContent: "../../../static/image/news/boy.png",
				looptime: 0,
				currentTime: 1,
				lastData: 0,
				oneTimeData: 0,
				returnResult: "",
				canvasWidth: 180,
				canvasHeight: 180,
				imageSrc: '../../static/img/abc_ic_star_black_16dp.png',
				buffSize: [],
				buffIndex: 0,
				printNum: [],
				printNumIndex: 0,
				printerNum: 1,
				currentPrint: 1,
				isReceiptSend: false,
				isLabelSend: false,
				// 打印机技术结束
			}
		},
		onLoad() {
// 打印机
			let that = this;
			let {
				BLEInformation
			} = that.Bluetooth;
			// 打印机结束
		},
		// 打印机开始
		computed: mapState(['sysinfo', 'Bluetooth']),
		onReady() {
			let list = []
			let numList = []
			let j = 0
			for (let i = 20; i < 200; i += 10) {
				list[j] = i;
				j++
			}
			for (let i = 1; i < 10; i++) {
				numList[i - 1] = i
			}
			this.buffSize = list;
			this.oneTimeData = list[0];
			this.printNum = numList;
			this.printerNum = numList[0];
		},
		onUnload() {
			let that = this;
			let {
				BLEInformation
			} = that.Bluetooth;
		},
		// 打印机结束
		onShow() {
			uni.$off("ckSelectFn")
			uni.$on("ckSelectFn", data => {
				this.warehouse_id = data.id
				this.warehouse_name = data.name
			})
			this.init()
			// 打印机开始
			let that = this;
			let width;
			let height;
			uni.getImageInfo({
				src: that.imageSrc,
				success(res) {
					console.log(res.width)
					console.log(res.height)
					width = res.width
					height = res.height
					that.canvasWidth = res.width;
					that.canvasHeight = res.height;
				}
			})
			const ctx = uni.createCanvasContext("edit_area_canvas", this);
			ctx.drawImage(this.imageSrc, 0, 0, width, height);
			ctx.draw();
			// 打印机结束
		},
		methods: {
			// 打印机开始
			receiptTest() {
				// this.selectshow = false
				var that = this;
				var canvasWidth = that.canvasWidth
				var canvasHeight = that.canvasHeight
				var command = esc.jpPrinter.createNew()
				command.init()
				// 标题
				command.bold(1); //加粗
				command.setFontSize(16); //字体大小
				command.setSelectJustification(1) //居中0左对齐1居中对齐2右对齐
				command.rowSpace(100);
				command.setText("库存查询");
				command.setPrint();
				command.rowSpace(60); //行间距
				command.bold(0); //取消加粗
				command.setFontSize(0); //正常字体
				// 内容
				command.bold(0); //加粗
				command.setSelectJustification(0) //居中0左对齐1居中对齐2右对齐
				command.setText("打印时间：" + httpRequest.timereturn(Number(new Date())));
				command.setPrint();
				// 表格
				command.rowSpace(80); //间距
				command.bold(5); //加粗
				command.setText("商品名称");
				command.setAbsolutePrintPosition(270);
				command.setText("实际库存");
				command.setAbsolutePrintPosition(380);
				command.setText("占用库存");
				command.setAbsolutePrintPosition(480);
				command.setText("可用库存");
				command.setPrint()
				command.bold(0); //加粗
				that.list.data.forEach(item=>{
					command.setText(item.name+"("+item.cost_price+")");
					
					if(item.biggoodsunit.id){
						command.setAbsolutePrintPosition(270);
						command.setText(item.biggoodsunit.sj_stock+"大");
						command.setAbsolutePrintPosition(380);
						command.setText(item.biggoodsunit.zy_stock+"大");
						command.setAbsolutePrintPosition(480);
						command.setText(item.biggoodsunit.use_stock+"大");
						command.setPrint()
					}
					if(item.middlegoodsunit.id){
						command.setAbsolutePrintPosition(270);
						command.setText(item.middlegoodsunit.sj_stock+"中");
						command.setAbsolutePrintPosition(380);
						command.setText(item.middlegoodsunit.zy_stock+"中");
						command.setAbsolutePrintPosition(480);
						command.setText(item.middlegoodsunit.use_stock+"中");
						command.setPrint()
					}
					if(item.smallgoodsunit.id){
						command.setAbsolutePrintPosition(270);
						command.setText(item.smallgoodsunit.sj_stock+"小");
						command.setAbsolutePrintPosition(380);
						command.setText(item.smallgoodsunit.zy_stock+"小");
						command.setAbsolutePrintPosition(480);
						command.setText(item.smallgoodsunit.use_stock+"小");
						command.setPrint()
					}
				})
				command.setText("合计：" + that.dataAll.cost_price);
				command.setPrint();
				command.setText("实际：大" + that.dataAll.sjdata.sj_stock_1+",中"+that.dataAll.sjdata.sj_stock_2+",小"+that.dataAll.sjdata.sj_stock_3);
				command.setPrint();
				command.setText("占用：大" + that.dataAll.zydata.zy_stock_1+",中"+that.dataAll.zydata.zy_stock_2+",小"+that.dataAll.zydata.zy_stock_3);
				command.setPrint();
				command.setText("可用：大" + that.dataAll.usedata.use_stock_1+",中"+that.dataAll.usedata.use_stock_2+",小"+that.dataAll.usedata.use_stock_3);
				command.setPrint();
				command.setSelectJustification(1) //居中0左对齐1居中对齐2右对齐
				command.setText("询博技术支持");
				command.setPrintAndFeedRow(3);
				that.isReceiptSend = true;
				that.prepareSend(command.getData());
			},
			
			//准备发送，根据每次发送字节数来处理分包数量
			prepareSend(buff) {
				console.log(buff);
				let that = this
				let time = that.oneTimeData
				let looptime = parseInt(buff.length / time);
				let lastData = parseInt(buff.length % time);
				console.log(looptime + "---" + lastData)
				this.looptime = looptime + 1;
				this.lastData = lastData;
				this.currentTime = 1;
				that.Send(buff)
			},
			//分包发送
			Send(buff) {
				let that = this
				let {
					currentTime,
					looptime: loopTime,
					lastData,
					oneTimeData: onTimeData,
					printerNum: printNum,
					currentPrint
				} = that;
				let buf;
				let dataView;
				if (currentTime < loopTime) {
					buf = new ArrayBuffer(onTimeData)
					dataView = new DataView(buf)
					for (var i = 0; i < onTimeData; ++i) {
						dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])
					}
				} else {
					buf = new ArrayBuffer(lastData)
					dataView = new DataView(buf)
					for (var i = 0; i < lastData; ++i) {
						dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])
					}
				}
				console.log("第" + currentTime + "次发送数据大小为：" + buf.byteLength)
				let {
					BLEInformation
				} = that.Bluetooth;
			
				plus.bluetooth.writeBLECharacteristicValue({
					deviceId: BLEInformation.deviceId,
					serviceId: BLEInformation.writeServiceId,
					characteristicId: BLEInformation.writeCharaterId,
					value: buf,
					success: function(res) {
						console.log(res)
					},
					fail: function(e) {
						console.log(e)
					},
					complete: function() {
						currentTime++
						if (currentTime <= loopTime) {
							that.currentTime = currentTime;
							that.Send(buff)
						} else {
							//  uni.showToast({
							// title: '已打印第' + currentPrint + '张',
							//  })
							if (currentPrint == printNum) {
								that.looptime = 0;
								that.lastData = 0;
								that.currentTime = 1;
								that.isReceiptSend = false;
								that.isLabelSend = false;
								that.currentPrint = 1;
							} else {
								currentPrint++;
								that.currentPrint = currentPrint;
								that.currentTime = 1;
								that.Send(buff)
							}
						}
					}
				})
			},
			// 打印机结束
			scanbarCode() {
				let that = this
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						that.keyword = res.result
						that.init()
					},
					fail(err) {
						console.log('错误信息：' + err);
					}
				});
			
			},
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			getmsg() {
				httpRequest.request('/dhtapi/Warehouse/kcLookIndexTotal', 'POST', {
					warehouse_id: this.warehouse_id,
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			init(isPage, page) {
				this.getmsg()
				let _this = this;
				httpRequest.request('/dhtapi/Warehouse/kcLookIndex', 'GET', {
					page: page || 1,
					limit: _this.limit,
					keyword: this.keyword,
					warehouse_id: this.warehouse_id,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			startPrint(qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				let that = this
				uni.showActionSheet({
					itemList: ['云打印机', '蓝牙打印机'],
					success: function(res) {
						// 选择云打印机走0
						if (res.tapIndex == 0) {
							that.modal.title = "请再次确认打印！"
							that.modalSure()
						}
						// 选择蓝牙打印机走1
						if (res.tapIndex == 1) {
							that.receiptTest()
						}
					},
					fail: function(res) {}
				});
			},
			modalSure() {
				this.modal.modalShow = false
				if (this.modal.title == "请再次确认打印！") {
					uni.showLoading({
						mask: true,
						title: "发送数据中"
					})
					httpRequest.request("/dhtapi/Warehouse/dykcLookIndexTotal", 'GET', {
						warehouse_id: this.warehouse_id,
					}, false, false, true).then(res => {
						uni.hideLoading()
						httpRequest.toast(res.msg)
					}).catch(err => {
						httpRequest.toast(err.msg);
					})
				}
			},
			hidefalse() {
				if (this.selectshow == true) {
					this.selectshow = false
					return
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.redcolor {
		color: #ffa126 !important;
	}

	.redcolor2 {
		color: #ffa126;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.greentext {
		color: #00b855;
	}

	.greentext2 {
		color: #00b855;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.shangpin {
		padding-bottom: 160rpx;
	}

	.lansewenben {
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}
	.lantext{
		color: #0BBDCB;
	}

	.dibubox {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 30rpx 30rpx 40rpx;
	}

	.xiajiantou {
		width: 24rpx;
		height: 14rpx;
		background-size: 100% 100%;
		background-image: url('@/static/image/system/xiajiantou.png');
		margin-left: 10rpx;
	}

	.huisetext {
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.xiabankuang {
		border-bottom: 2rpx solid rgba(153, 153, 153, 0.05);
	}

	.righticon4 {
		width: 14rpx;
		height: 24rpx;
		background-image: url("@/static/image/system/smallrighticon.png");
		background-size: 100% 100%;
		margin-left: 10rpx;
	}

	.lansrbgc {
		background-color: rgb(242, 251, 252);
	}

	.lansetext {
		font-size: 26rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	.lansesamlltext {
		font-size: 16rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.flex2 {
		flex: 2;
	}

	.flex1 {
		flex: 1.5;
		text-align: center;
	}

	.dayinji {
		width: 40rpx;
		height: 40rpx;
		background-image: url("@/static/image/system/my2.png");
		background-size: 100% 100%;
	}

	// 顶部搜索
	.searchimg {
		width: 24rpx;
		height: 24rpx;
		background-image: url("@/static/image/system/search.png");
		background-size: 100% 100%;
	}

	.searchbox {
		width: 69%;
		margin-left: 12rpx;
		padding: 12rpx 20rpx;
		box-sizing: border-box;
		background-color: #f3f3f3;
		border-radius: 50rpx;

		input {
			width: 80%;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			height: 24rpx;
			min-height: 24rpx;
		}
	}
</style>
<style lang="scss" scoped>
	// 定位点点点
	.diandiandian {
		position: relative;
	}

	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 200rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}

	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}

	.leftimage {
		width: 34rpx;
		height: 34rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.itemselect {
		padding: 20rpx 30rpx;
	}

	.topbox {
		border-bottom: 2rpx solid rgba(255, 255, 255, .1);
	}
</style>